<template>
  <fieldset>
    <legend>详细</legend>
    <!-- <h1>{{$route.params.id}}</h1> -->
    <h1>名字:{{ target.title }}</h1>
    <img :src="target.img" alt="" />
    <h4>名字:{{ target.desc }}</h4>
  </fieldset>
</template>
<script>
export default {
  data() {
    return {
      target: {},
      goodsDetail: [
        {
          id: 1,
          title: "静静",
          img:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605589993688&di=5df62ef49b70360830944c33924e4ed6&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F9936081243%2F1000.jpg",
          desc: "史诗级爱恨纠葛。"
        },
        {
          id: 2,
          title: "娇娇",
          img:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605590313171&di=e18893063a85e52307cfe3c6f6ad526e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F7%2F50%2Fa3b8291036.jpg",
          desc: "炒鸡喜欢你。"
        },
        {
          id: 3,
          title: "三排三",
          img:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2811111638,206355664&fm=26&gp=0.jpg",
          desc: "あなたが大好きです。"
        }
      ]
    };
  },
  mounted() {
    // console.log(this.$route);// 当前路由对象
    // console.log(this.$router);// 跟路由对象
    // 动态路由参数可以通过 $route.params获取
    console.log(this.$route.params);
    let id = this.$route.params.id;

    this.target = this.goodsDetail.find(item => item.id == id);
  }
};
</script>
